<md-dialog w-i18n-ns="app.utils" class="tutorial-modals" aria-label="modal">
    <div class="btn icon-close" w-modal-close></div>
    <w-step-by-step active-step="0">
        <w-step class="step-1">
            <md-dialog-content>

                <div class="content-wrapper basic-500 margin-05 body-2">
                    <h1>
                        <span w-i18n="modal.tutorialModals.step1.title"></span>
                    </h1>

                    <div class="flex">
                        <div>
                            <img class="computer" src="/img/icons/tutorial-modals/tutorial-computer.svg"/>
                        </div>
                        <div>
                            <div class="margin-2">
                                <span w-i18n="modal.tutorialModals.step1.p1"></span>
                            </div>
                            <div class="margin-2">
                                <span w-i18n="modal.tutorialModals.step1.p2"></span>
                            </div>
                            <div class="margin-2">
                                <span w-i18n="modal.tutorialModals.step1.p3"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <w-analytics event="'Onboarding SEED Click'" target="'ui'"></w-analytics>
                    <w-button class="big long submit margin-auto desktop-only" w-step-next>
                        <span w-i18n="modal.tutorialModals.step1.button"></span>
                    </w-button>
                    <w-button class="big long submit mobile-only" w-step-next>
                        <span w-i18n="modal.tutorialModals.step1.buttonMobile"></span>
                    </w-button>
                </w-analytics>
            </md-dialog-content>
        </w-step>

        <w-step class="step-2">
            <md-dialog-content>
                <div class="content-wrapper basic-500 margin-05 body-2">
                    <h1>
                        <span w-i18n="modal.tutorialModals.step2.title"></span>
                    </h1>

                    <div class="margin-4">
                        <span w-i18n="modal.tutorialModals.step2.p1"></span>
                    </div>

                    <div class="flex-cols">
                        <div class="cell cell-001 margin-4">
                            <div w-i18n="modal.tutorialModals.step2.cell1"></div>
                        </div>

                        <div class="cell cell-002 margin-4">
                            <div w-i18n="modal.tutorialModals.step2.cell2"></div>
                        </div>

                        <div class="cell cell-003 margin-4">
                            <div w-i18n="modal.tutorialModals.step2.cell3"></div>
                        </div>

                        <div class="cell cell-004 margin-4">
                            <div w-i18n="modal.tutorialModals.step2.cell4"></div>
                        </div>
                    </div>
                </div>

                <div class="buttons-wrapper">
                    <w-button class="big long" w-step-prev>
                        <span w-i18n="modal.tutorialModals.step2.backButton"></span>
                    </w-button>
                    <w-button class="big long submit" w-step-next>
                        <span w-i18n="modal.tutorialModals.step2.nextButton"></span>
                    </w-button>
                </div>

            </md-dialog-content>
        </w-step>

        <w-step class="step-3">

            <md-dialog-content>
                <div class="content-wrapper basic-500 margin-05 body-2">
                    <h1>
                        <span w-i18n="modal.tutorialModals.step3.title"></span>
                    </h1>

                    <div class="margin-4">
                        <span w-i18n="modal.tutorialModals.step3.p1"></span>
                    </div>

                    <div class="flex-cols">
                        <div class="cell cell-005 margin-4" ng-if="$ctrl.isWeb">
                            <div w-i18n="modal.tutorialModals.step3.cell1"></div>
                        </div>
                        <div class="cell cell-006 margin-4" ng-if="$ctrl.isWeb">
                            <div w-i18n="modal.tutorialModals.step3.cell2"></div>
                        </div>
                        <div class="cell cell-007 margin-4">
                            <div w-i18n="modal.tutorialModals.step3.cell3"></div>
                        </div>
                        <div class="cell cell-008 margin-4">
                            <div ng-if="$ctrl.isDesktop">
                                <span w-i18n="modal.tutorialModals.step3.cell4"></span>
                            </div>
                            <div ng-if="$ctrl.isWeb">
                                <span w-i18n="modal.tutorialModals.step3.cell4Web"></span>
                            </div>
                        </div>
                        <div class="cell cell-009 margin-4">
                            <div w-i18n="modal.tutorialModals.step3.cell5"></div>
                        </div>
                        <div class="cell cell-010 margin-4">
                            <div w-i18n="modal.tutorialModals.step3.cell6"></div>
                        </div>
                    </div>
                </div>

                <div class="buttons-wrapper">
                    <w-button class="big long" w-step-prev>
                        <span w-i18n="modal.tutorialModals.step3.backButton"></span>
                    </w-button>
                    <w-button class="big long submit" w-modal-hide>
                        <span w-i18n="modal.tutorialModals.step3.nextButton"></span>
                    </w-button>
                </div>

            </md-dialog-content>
        </w-step>
    </w-step-by-step>
</md-dialog>
